<script setup>
import 'animate.css'
import axios from 'axios'
import { onMounted, ref } from 'vue'
import waterfall from '../components/yzx/Waterfall.vue'

import { useRouter } from 'vue-router'
axios.defaults.baseURL = 'http://localhost:3000'

onMounted(() => {
  getdata()
})
// 地区房源列表
const home = ref([])
// 地区列表
const address = ref([])
const load = ref(false)

const getdata = async () => {
  let {
    data: { homelist, addresslist }
  } = await axios.get('/yzx/gethome')
  home.value = homelist
  address.value = addresslist[0].name
  load.value = true
}

// 下拉刷新
const loading = ref(false)
const onRefresh = () => {
  setTimeout(() => {
    getdata()
    loading.value = false
  }, 1000)
}
// 导航滚动
const activeName = ref('first')
const handleClick = (tab, event) => { }
// 星星
const value = ref(3)
// 跳转详情页面
const router = useRouter()

const statuss = ref('')
// 添加收藏
const like = async (id, status) => {
  console.log(id, 'ididid')
  console.log(status, 'status')

  statuss.value = !status

  let {
    data: { code }
  } = await axios.post('/yzx/editHouse', { id: id, collect: statuss.value })
  if (code === 200) {
    console.log('修改完成')
    getdata()
  }
}
</script>

<template>
  <el-skeleton style="width: 100vw">
    <template #template>
      <div id="home">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
          <!-- 轮播图 -->
          <div id="banner">
            <van-swipe class="my-swipe" :autoplay="2000" show-indicators="false">
              <van-swipe-item data-aos="animate__fadeOutRight" class="element animated">
                <img
                  src="https://ts2.cn.mm.bing.net/th?id=OIP-C.dCWJH6LSs_oS4x1IV9YOBwHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2"
                  alt="" />
              </van-swipe-item>
              <van-swipe-item data-aos="zoom-out" class="element animated">
                <img
                  src="https://ts2.cn.mm.bing.net/th?id=OIP-C.qvYNDnrJ3wJg8b1Y0n6TQQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2"
                  alt="" />
              </van-swipe-item>
              <van-swipe-item data-aos="zoom-out" class="element animated">
                <img
                  src="https://ts2.cn.mm.bing.net/th?id=OIP-C.QpL4D-mzLktFIE8V3lQEsAHaDw&w=350&h=177&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2"
                  alt="" />
              </van-swipe-item>
            </van-swipe>
          </div>
          <!-- 搜索框 -->
          <div id="search">
            <input type="text" placeholder="请输入……" id="inp" />
          </div>
          <!-- 宫格 -->
          <van-sticky>
            <div id="grid">
              <van-grid>
                <van-grid-item style="color: #ff768a" icon="location" text="附近房源" to="" />
                <van-grid-item style="color: #769aff" icon="like" text="收藏" to="" @click="router.push('/collect')" />
                <van-grid-item style="color: #1296db" icon="comment" text="浏览记录" to=""
                  @click="router.push('/datecontent')" />
                <van-grid-item style="color: #cfcf5a" icon="manager" text="成为房东" to=""
                  @click="router.push('/addhome')" />
              </van-grid>
            </div>
          </van-sticky>
          <p style="
              font-weight: bolder;
              font-size: 20px;
              background-color: #fbfbfb;
              margin-left: 10px;
            ">
            热门目的地
          </p>
          <hr style="background-color: #e4e7ed; height: 2px; border: none" />
          <!-- 热门目的地 -->
          <div id="hot" v-if="load">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="珠海" name="first" id="tab-pane">
                <div id="house" v-for="item in home.filter((item) => item.cate === '珠海')" :key="item._id">
                  <img :src="item.img[1]" alt="" @click="router.push(`/home/xq?id=${item._id}`)" />
                  <!-- 收藏状态 -->
                  <span v-if="item.collect" style="
                      display: inline-block;
                      float: right;
                      margin-top: -130px;
                      color: red;
                      font-size: 25px;
                      margin-right: 5px;
                    " @click="like(item._id, item.collect)"><van-icon name="like" /></span>

                  <span v-else style="
                      display: inline-block;
                      float: right;
                      margin-top: -130px;
                      color: white;
                      font-size: 25px;
                      margin-right: 5px;
                    " @click="like(item._id, item.collect)"><van-icon name="like" /></span>
                  <!-- ----------- -->

                  <p style="font-size: 10px">整套公寓.{{ item.badNum }}张床</p>
                  <p>￥{{ item.price }}/晚</p>
                  <p>
                    <van-rate v-model="value" :size="15" /><span>{{ item.houselabel[0] }}</span>
                  </p>
                </div>
              </el-tab-pane>
              <el-tab-pane label="云南" name="second" id="tab-pane">
                <div id="house" v-for="item in home.filter((item) => item.cate === '云南')" :key="item._id">
                  <img :src="item.img[1]" alt="" @click="router.push(`/home/xq?id=${item._id}`)" />
                  <!-- 收藏状态 -->
                  <span v-if="item.collect" style="
                      display: inline-block;
                      float: right;
                      margin-top: -130px;
                      color: red;
                      font-size: 25px;
                      margin-right: 5px;
                    " @click="like(item._id, item.collect)"><van-icon name="like" /></span>

                  <span v-else style="
                      display: inline-block;
                      float: right;
                      margin-top: -130px;
                      color: white;
                      font-size: 25px;
                      margin-right: 5px;
                    " @click="like(item._id, item.collect)"><van-icon name="like" /></span>
                  <!-- ----------- -->
                  <p style="font-size: 10px">整套公寓.{{ item.badNum }}张床</p>
                  <p>￥{{ item.price }}/晚</p>
                  <p>
                    <van-rate v-model="value" :size="15" /><span>{{ item.houselabel[0] }}</span>
                  </p>
                </div>
              </el-tab-pane>
              <el-tab-pane label="海南" name="third" id="tab-pane">
                <div id="house" v-for="item in home.filter((item) => item.cate === '海南')" :key="item._id">
                  <img :src="item.img[1]" alt="" @click="router.push(`/home/xq?id=${item._id}`)" />
                  <!-- 收藏状态 -->
                  <span v-if="item.collect" style="
                      display: inline-block;
                      float: right;
                      margin-top: -130px;
                      color: red;
                      font-size: 25px;
                      margin-right: 5px;
                    " @click="like(item._id, item.collect)"><van-icon name="like" /></span>

                  <span v-else style="
                      display: inline-block;
                      float: right;
                      margin-top: -130px;
                      color: white;
                      font-size: 25px;
                      margin-right: 5px;
                    " @click="like(item._id, item.collect)"><van-icon name="like" /></span>
                  <!-- ----------- -->
                  <p style="font-size: 10px">整套公寓.{{ item.badNum }}张床</p>
                  <p>￥{{ item.price }}/晚</p>
                  <p>
                    <van-rate v-model="value" :size="15" /><span>{{ item.houselabel[0] }}</span>
                  </p>
                </div>
              </el-tab-pane>
              <el-tab-pane label="成都" name="fourth" id="tab-pane">
                <div id="house" v-for="item in home.filter((item) => item.cate === '成都')" :key="item._id">
                  <img :src="item.img[1]" alt="" @click="router.push(`/home/xq?id=${item._id}`)" />
                  <!-- 收藏状态 -->
                  <span v-if="item.collect" style="
                      display: inline-block;
                      float: right;
                      margin-top: -130px;
                      color: red;
                      font-size: 25px;
                      margin-right: 5px;
                    " @click="like(item._id, item.collect)"><van-icon name="like" /></span>

                  <span v-else style="
                      display: inline-block;
                      float: right;
                      margin-top: -130px;
                      color: white;
                      font-size: 25px;
                      margin-right: 5px;
                    " @click="like(item._id, item.collect)"><van-icon name="like" /></span>
                  <!-- ----------- -->
                  <p style="font-size: 10px">整套公寓.{{ item.badNum }}张床</p>
                  <p>￥{{ item.price }}/晚</p>
                  <p>
                    <van-rate v-model="value" :size="15" /><span>{{ item.houselabel[0] }}</span>
                  </p>
                </div>
              </el-tab-pane>
              <el-tab-pane label="广州" name="five" id="tab-pane">
                <div id="house" v-for="item in home.filter((item) => item.cate === '广州')" :key="item._id">
                  <img :src="item.img[1]" alt="" @click="router.push(`/home/xq?id=${item._id}`)" />
                  <!-- 收藏状态 -->
                  <span v-if="item.collect" style="
                      display: inline-block;
                      float: right;
                      margin-top: -130px;
                      color: red;
                      font-size: 25px;
                      margin-right: 5px;
                    " @click="like(item._id, item.collect)"><van-icon name="like" /></span>

                  <span v-else style="
                      display: inline-block;
                      float: right;
                      margin-top: -130px;
                      color: white;
                      font-size: 25px;
                      margin-right: 5px;
                    " @click="like(item._id, item.collect)"><van-icon name="like" /></span>
                  <!-- ----------- -->
                  <p style="font-size: 10px">整套公寓.{{ item.badNum }}张床</p>
                  <p>￥{{ item.price }}/晚</p>
                  <p>
                    <van-rate v-model="value" :size="15" /><span>{{ item.houselabel[0] }}</span>
                  </p>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div style="padding: 14px" v-else>
            <el-skeleton-item variant="p" id="grid" />
            <div>
              <ul style="display: flex; justify-content: space-between">
                <li><el-skeleton-item variant="text" style="width: 50px; height: 25px" /></li>
                <li><el-skeleton-item variant="text" style="width: 50px; height: 25px" /></li>
                <li><el-skeleton-item variant="text" style="width: 50px; height: 25px" /></li>
                <li><el-skeleton-item variant="text" style="width: 50px; height: 25px" /></li>
                <li><el-skeleton-item variant="text" style="width: 50px; height: 25px" /></li>
              </ul>
              <div id="hot1">
                <div>
                  <el-skeleton-item variant="text" id="hot_item" />
                  <div><el-skeleton-item variant="p" style="width: 80px" /><br /></div>
                </div>
                <div>
                  <el-skeleton-item variant="text" id="hot_item" />
                  <div><el-skeleton-item variant="p" style="width: 80px" /><br /></div>
                </div>
              </div>
            </div>
          </div>
          <!-- 房东的故事 -->
          <p style="
              font-weight: bolder;
              font-size: 20px;
              background-color: #fbfbfb;
              margin-left: 10px;
            ">
            房东的故事
          </p>
          <hr style="background-color: #e4e7ed; height: 2px; border: none" />
          <waterfall />
        </van-pull-refresh>
      </div>
      <!-- <Home_guajia v-else /> -->

    </template>
  </el-skeleton>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#home {
  width: 100vw;
  height: 100vh;
  /* background-color: pink; */
}

/* 轮播图样式 */
#home #banner {
  width: 100%;
  height: 330px;
}

#home #banner img {
  width: 100%;
  height: 330px;
}

.my-swipe .van-swipe-item {
  width: 100%;
  height: 330px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}

#search {
  width: 100%;
  height: 50px;
  margin-top: -50px;
}

#search #inp {
  width: 90%;
  height: 35px;
  border: none;
  margin-top: 8px;
  margin-left: 15px;
  border-radius: 10px;
  opacity: 0.85;
}

#grid {
  width: 100%;
  height: auto;
  margin: 0 auto;
  color: #b7bacc;
}

#hot {
  width: 100%;
  height: 280px;
  background-color: white;
}

/* tab栏 */
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

#house {
  width: 180px;
  height: 100%;
  background-color: white;
  float: left;
  margin-left: 10px;
}

#house img {
  width: 100%;
  height: 120px;
}

#tab-pane {
  width: 100%;
  height: 210px;
  overflow-x: scroll;
}

#hot1 {
  width: 100%;
  height: 190px;
  display: flex;
  justify-content: space-between;
}

#hot_item {
  width: 180px;
  height: 150px;
  /* margin-left: 10px; */
}
</style>